$('.header-nav>li>a').on('mouseenter', function () {
    // console.log($(this).parent());
    $(this).css('color', 'orange').parent().siblings().children("a").css('color', '#333');
    $(this).css('box-shadow', '2px 3px 6px rgba(0,0,0 0.18)')
    // console.log( $(this).parent('li').children(0));
    $(this).parent('li').children('div').slideDown("2000");

})

$('.header-nav>li>a').on('mouseleave', function () {
    // $(this).parent('li').children('.nav-list').hide()
    $(this).parent('li').children('div').slideUp("2000");
})

// 点击购物车的效果
$('.header-left-li').on('mouseenter', function () {
    $(this).find('.bian_orange').css('color', 'orange')
    $(this).children(0).find('.icon-gouwuche').css('color', 'orange')
    $(this).css('background-color', 'white')
    $(this).children(0).find('.kuhao').css('color', 'orange')
    $(this).children(1).show()
})
$('.header-left-li').on('mouseleave', function () {
    $(this).find('.bian_orange').css('color', '#b0b0b0')
    $(this).children(0).find('.icon-gouwuche').css('color', '#b0b0b0')
    $(this).css('background-color', '#424242')
    $(this).children(0).find('.kuhao').css('color', '#b0b0b0')
    $(this).children(".about_car").hide()
})


// 搜索框的效果
$('.input-button').on('focus', function () {
    $(this).next().show()
    $(this).parent().css('border-color', '#ff9147')
    $(this).siblings('.big-button').css('border-left-color', '#ff9147')
    $('.search-list>li').on('mouseenter', function () {
        $(this).css('background-color', '#e0e0e0').siblings('.search-list>li').css('background-color', '')
    })
})

$('.input-button').on('blur', function () {
    $(this).next().hide()
    $(this).parent().css('border-color', '#e0e0e0')
    $(this).siblings('.big-button').css('border-left-color', '#e0e0e0')
})





let register = document.querySelector(".register")
let model_zhuce = document.querySelector(".model_zhuce");
let model = document.querySelector("#model")
let vanish = document.querySelector("#vanish")
let btn_disagree = document.querySelector(".btn_disagree")
// 点击注册弹出模态框
register.addEventListener('click', function () {
    model_zhuce.style.display = "block";
    model.style.display = "block"
})


// 点击×号变色
vanish.addEventListener('mouseenter', function () {
    this.style.color = "red"
})
vanish.addEventListener('mouseleave', function () {
    this.style.color = ""
})
// 点击❌号模态框进行隐藏
vanish.addEventListener('click', function () {
    model_zhuce.style.display = "none";
    model.style.display = "none"
})


// 点击不同意模态框隐藏
btn_disagree.addEventListener('click', function () {
    model_zhuce.style.display = "none";
    model.style.display = "none"
})
btn_disagree.addEventListener('mouseenter', function () {
    this.style.backgroundColor = "#333"
})
btn_disagree.addEventListener('mouseleave', function () {
    this.style.backgroundColor = ""
})

// 点击同意跳转到注册页面
let oBtnAgree = document.querySelector(".btn_agree")
oBtnAgree.onclick = function () {
    model_zhuce.style.display = "none";
    model.style.display = "none"
    location.href = './login.html'

}


// 点击logo跳转至首页
$(".header-logo").on("click", function () {
    location.href = '../html/homepage.html'
})


// 小米手机
getGoodsList11()
function getGoodsList11() {
    $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "012" }, function (data) {
        // console.log(data);
        let htmlStr11 = "";
        for (let i = 0; i < data.length; i++) {
            htmlStr11 += `
                            <li>
                                <div class="nav-top">
                                    <img src="${data[i].goodsImg}" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">${data[i].goodsName}</p>
                                    <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                </div>
                        </li>`
        }
        // console.log(htmlStr11);
        $(".wrap1").html(htmlStr11);
    }, "json");
}

// 红米手机
getGoodsList12()
function getGoodsList12() {
    $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "013" }, function (data) {
        // console.log(data);
        let htmlStr12 = "";
        for (let i = 0; i < data.length; i++) {
            // console.log(data[i]);
            htmlStr12 += `
                            <li>
                                <div class="nav-top">
                                    <img src="${data[i].goodsImg}" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">${data[i].goodsName}</p>
                                    <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                </div>
                        </li>`
        }
        // console.log(htmlStr12);
        $(".wrap2").html(htmlStr12);
    }, "json");
}

// 电视
getGoodsList13()
function getGoodsList13() {
    $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "014" }, function (data) {
        // console.log(data);
        let htmlStr13 = "";
        for (let i = 0; i < data.length; i++) {
            // console.log(data[i]);
            htmlStr13 += `
                            <li>
                                <div class="nav-top">
                                    <img src="${data[i].goodsImg}" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">${data[i].goodsName}</p>
                                    <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                </div>
                        </li>`
        }
        $(".wrap3").html(htmlStr13);
    }, "json");
}



// 笔记本
getGoodsList14()
function getGoodsList14() {
    console.log(111);

    $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "015" }, function (data) {
        console.log(data);
        let htmlStr14 = "";
        for (let i = 0; i < data.length; i++) {
            htmlStr14 += `
                            <li>
                                <div class="nav-top">
                                    <img src="${data[i].goodsImg}" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">${data[i].goodsName}</p>
                                    <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                </div>
                        </li>`
        }
        // console.log(htmlStr11);
        $(".wrap4").html(htmlStr14);
    }, "json");
}


// 平板
getGoodsList15()
function getGoodsList15() {
    $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "016" }, function (data) {
        // console.log(data);
        let htmlStr15 = "";
        for (let i = 0; i < data.length; i++) {
            // console.log(data[i]);
            htmlStr15 += `
                            <li>
                                <div class="nav-top">
                                    <img src="${data[i].goodsImg}" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">${data[i].goodsName}</p>
                                    <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                </div>
                        </li>`
        }
        $(".wrap5").html(htmlStr15);
    }, "json");
}


// 家电
getGoodsList16()
function getGoodsList16() {
    $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "017" }, function (data) {
        // console.log(data);
        let htmlStr16 = "";
        for (let i = 0; i < data.length; i++) {
            // console.log(data[i]);
            htmlStr16 += `
                            <li>
                                <div class="nav-top">
                                    <img src="${data[i].goodsImg}" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">${data[i].goodsName}</p>
                                    <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                </div>
                        </li>`
        }
        $(".wrap6").html(htmlStr16);
    }, "json");
}

// 路由器
getGoodsList17()
function getGoodsList17() {
    $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "018" }, function (data) {
        // console.log(data);
        let htmlStr17 = "";
        for (let i = 0; i < data.length; i++) {
            // console.log(data[i]);
            htmlStr17 += `
                            <li>
                                <div class="nav-top">
                                    <img src="${data[i].goodsImg}" alt="">
                                </div>
                                <div class="nav-bottom">
                                    <p class="nav-word">${data[i].goodsName}</p>
                                    <p class="nav-price price-color">${data[i].goodsPrice}元起</p>
                                </div>
                        </li>`
        }
        $(".wrap7").html(htmlStr17);
    }, "json");
}

